<template>
  <div class="chart" ref="chart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chartInstance: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          valueFormatter: (value) => `${value}${this.chartData.unit}`
        },
        grid: {
          left: '20%',
          right: '15%',
          bottom: '15%',
          top: '10%'
        },
        legend: {
          show: false,
          top: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontFamily: 'Adobe Heiti Std',
            fontSize: '12px',
            color: '#D9E8F4'
          }
        },
        xAxis: [
          {
            type: 'value',
            name: this.chartData.xAxis.name,
            nameTextStyle: {
              fontFamily: 'MicrosoftYaHeiUI',
              fontSize: '12px',
              color: '#FFFFFF'
            },
            axisTick: { show: false },
            axisLabel: {
              textStyle: {
                fontFamily: 'MicrosoftYaHeiUI',
                fontSize: '12px',
                color: '#FFFFFF'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisLabel: {
              textStyle: {
                fontFamily: 'MicrosoftYaHeiUI',
                fontSize: '12px',
                color: '#FFFFFF'
              }
            },
            data: this.chartData.yAxis.data
          }
        ],
        dataZoom: [
          {
            show: this.chartData.data.data.length > 5,
            start: 0,
            end: 500 / this.chartData.data.data.length,
            top: 180,
            bottom: 20
          }
        ],
        series: [
          {
            name: this.chartData.data.name,
            type: 'bar',
            barWidth: '11px',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 1, color: '#548FDA' },
                { offset: 0, color: '#49D5FF' }
              ]),
              barWidth: '11px'
            },
            data: this.chartData.data.data
          }
        ]
      }
      this.chartInstance.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
  height: 100%;
}
</style>
